<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <list-com>
      <template v-slot:toubu>
        <div>
          <h1>头部</h1>
          <nav-com></nav-com>
        </div>
      </template>
      <template v-slot:jiaobu>
        <div>
          <h1>脚步<button>点击退出</button></h1>
        </div>
      </template>
      <!-- v-slot:插槽名
          插槽的简写 #插槽名 -->
      <template #news>
        <div>
          <h1>新闻部分</h1>
        </div>
      </template>
      <!-- 默认插槽 -->
      <template #default>
        <div>
          <h1>1111</h1>
        </div>
      </template>
    </list-com>
  </div>
  <!-- 子组件的模板部分 -->
  <template id="list">
    <div>
      <slot></slot>
      <slot name="toubu"></slot>
      <ul>
        <li v-for="(item,index) in listData">{{item}}</li>
      </ul>
      <slot name="news"></slot>
      <slot name="jiaobu"></slot>
    </div>
  </template>

  <script src="./vue.js"></script>
  <script>
    // 插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot>
    // 表示，父组件可以在这个占位符中填充任何模板代码，
    // 具名插槽
    //  如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。


    Vue.component("navCom", {
      template: `<div><h1>导航部分</h1></div>`,
      name: "navs",
      data() {
        return {}
      }
    })
    var vm = new Vue({
      name: "fu",
      el: "#app",
      data() {
        return {}
      },
      components: {
        listCom: { //子组件
          template: "#list",
          data() {
            return {
              listData: ["闪现", "治疗术", "疾跑", "传送"]
            }
          }
        }
      }
    })


  </script>
</body>

</html>